// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use 'partials/toolbars' as *;
@use 'partials/buttons' as *;
@use 'partials/toolbars' as *;
@use 'partials/labels' as labels;

@mixin input-invalid {
  @include border-all($red);
}

@mixin text-input-base {
  @include border-all();
  @include default-border-radius();
  @include transition(border-color 0.12s);
  color: $black;
  font-family: inherit;
  outline: none;
  padding: 0 4px;

  &:focus {
    @include border-all($blue);
  }

  &.hasError {
    @include input-invalid();
  }

  &:-moz-ui-invalid {
    box-shadow: none;
  }
}

:not(.ui) {
  > input[type='date'],
  > input[type='datetime'],
  > input[type='datetime-local'],
  > input[type='email'],
  > input[type='month'],
  > input[type='number'],
  > input[type='password'],
  > input[type='search'],
  > input[type='tel'],
  > input[type='text'],
  > input[type='time'],
  > input[type='url'],
  > input[type='week'],
  > .tox-tinymce {
    @include text-input-base();
  }

  // the react timepicker has an input with no type
  > input:not([type]),
  > select {
    font-family: inherit;
  }
}

input[type='file'] {
  &.hasError {
    @include border-all($red);
    color: $red;
    background: $light-red;
  }
}

input[type='checkbox'],
input[type='radio'] {
  margin: 0;
  vertical-align: middle;
}

input[type='checkbox'].validate {
  &:not(:checked) + label {
    @extend .text-error;
  }
}

input[type='time'] {
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button,
  &::-webkit-clear-button {
    -webkit-appearance: none;
    padding-right: 0;
  }
}

input[type='number']:not([data-internal]),
input[type='time'] {
  -moz-appearance: textfield;
  padding-right: 0;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    cursor: pointer;
    margin-left: 4px;
    padding-top: 1px;
    position: relative;
  }
}

textarea {
  @include text-input-base();
  resize: vertical;
}

select:not([data-internal]) {
  @include text-input-base();
  background: white;

  @mixin no-value {
    font-style: italic;
    color: $dark-gray;
  }

  &.no-value {
    @include no-value();
  }

  &:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 $black !important;
  }

  option {
    font-style: normal;
    color: $black;

    &[value='__None'] {
      @include no-value();
    }

    &[disabled] {
      color: $dark-gray;
      background-color: $light-gray;
    }
  }
}

select,
ul {
  &.hasError {
    @include border-all($red);
    color: $red;
  }
}

.i-selection {
  input[type='checkbox'],
  input[type='radio'] {
    display: none;

    &:checked + label {
      @include labels.i-label-highlight($blue, $dark-blue);
      @include i-button-flavor($blue, $dark-blue);
    }

    &:first-child + label {
      border-top-left-radius: $default-border-radius;
      border-bottom-left-radius: $default-border-radius;
    }

    &:disabled + label.i-button {
      @include button-disabled();
    }
  }

  input[type='radio'] {
    &:checked + label {
      cursor: default;
    }

    &:checked + label:hover,
    &:checked + label:active {
      @include labels.i-label-highlight($blue, $dark-blue);
      @include i-button-flavor($blue, $dark-blue);
    }
  }
}

.checkbox-with-text {
  input[type='checkbox'] {
    float: left;
    margin-left: 1px;
  }

  div {
    margin-left: 21px;
  }
}

$dropdown-transition-step: 0.05s;
$dropdown-transition: $dropdown-transition-step ease-out;

@mixin dropdown-visible {
  visibility: visible;
  opacity: 1;
  @include transition(
    visibility $dropdown-transition,
    opacity $dropdown-transition,
    height $dropdown-transition,
    padding $dropdown-transition
  );
}

@mixin dropdown-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0 !important;
  padding: 0 !important;
  @include transition(
    visibility $dropdown-transition,
    opacity $dropdown-transition,
    height $dropdown-transition,
    padding $dropdown-transition
  );
}

.timedelta-widget {
  input[type='number'] {
    display: inline;
    width: 6em !important;
  }

  select {
    display: inline;
    width: auto;
  }
}

.datetime-widget,
.date-widget,
.time-widget {
  .rc-time-picker-input {
    width: 100% !important;
    font-size: 1em;
  }

  .rc-time-picker-panel-select ul {
    // undo the style changes caused by the `ul:not(.i-dropdown)` rule
    // inside `.action-box`
    padding-left: 0 !important;
    max-height: none;
  }

  .rc-time-picker {
    width: 22% !important;
    color: $black;
    vertical-align: top;
    font-size: 1em;
  }

  .rc-time-picker-panel-input-wrap {
    // make sure time does not jump when opening the time picker
    padding-left: calc(1em - 1px);
    padding-top: calc(0.5em + 1px);
  }

  .rc-time-picker-panel-input,
  .rc-time-picker-panel-select,
  .rc-time-picker-panel-inner {
    font-size: 1em;
    color: $black;
  }

  .rc-time-picker-input[disabled] {
    cursor: default;
  }

  .timezone {
    @include icon-before('icon-earth');
    color: $light-black;
    position: relative;
    top: 2px;
  }

  .clear-pickers {
    @include icon-before('icon-cross');
    font-size: 1.3em;
    position: relative;
    left: 20px;
    top: 4px;

    &:hover {
      color: $red;
      cursor: pointer;
    }
  }
}

.datetime-widget > div {
  display: flex;
  gap: 1em;
  align-items: center;

  .rc-time-picker {
    // awful hack to make the slight size difference between the date and time picker
    // pretty much invisible
    align-self: flex-start;
  }
}

.date-widget > span {
  display: flex;
  align-items: center;
  gap: 0.2em;
}

.date-widget .clear-pickers,
.datetime-widget .clear-pickers {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  border: 0;
  background: none;
  height: 1em !important; /* Hack to suppress the _form.scss styling */
  aspect-ratio: 1;

  & > span {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

.i-form .form-group .form-field {
  .datetime-widget,
  .date-widget {
    input[type='text'] {
      font-size: 1em;
      width: 150px;
    }
  }
}

.has-warning {
  color: $yellow;
}

.i-radio,
.i-checkbox {
  display: flex;

  input {
    flex-shrink: 0;
    flex-grow: 0;
    margin-top: 2px;
  }

  label {
    display: inline-block;
    margin-left: 0.5em;
  }

  i.icon-padding {
    padding-left: 5px;
  }

  span.checkbox-label {
    display: flex;
  }
}

@mixin tilted-strips-bg {
  @include placeholder-color($color: $light-black);
  background: repeating-linear-gradient(
    -40deg,
    lighten($gray, 0.7 * $color-variation),
    lighten($gray, 0.7 * $color-variation) 10px,
    lighten($gray, 0.9 * $color-variation) 10px,
    lighten($gray, 0.9 * $color-variation) 20px
  ) !important;
  font-style: italic;
  color: $light-black !important;
}

.i-has-action {
  @include toolbar-group();
  @extend .flexrow;
  padding: 0;

  > input,
  > textarea {
    flex-grow: 1;
    height: 2.5em;
    line-height: 1.2em;
    margin: 0;
    padding: 0.5em 1em;
  }

  > textarea {
    border-top-right-radius: 0 !important;
  }

  > textarea + .i-button {
    border-left: 0;
  }

  + .i-has-action-message {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    height: 1em;
  }
}

dd > .i-has-action {
  vertical-align: middle;

  > .i-button,
  > input {
    height: 2em;
    font-size: 90%;
  }

  > input {
    width: 18em;
    background-color: white;
  }
}

.qtip-content dl > dd > .i-has-action {
  > * {
    line-height: 1em;
  }

  > input {
    width: 110px;
  }
}

.advanced-placeholders {
  margin-top: 0.5em;

  .toggle {
    margin-top: 0.5em;
  }

  .placeholders {
    padding: 0.25em 0;
  }
}

code.placeholder {
  font-style: normal;
  font-size: 0.9em;
}

// The .hidden style should not apply to some elements
.ui.checkbox > input.hidden {
  display: inline-block !important;
}
